<!DOCTYPE html>
<html>
<head>
	<title>计算器</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="vue.min.js"></script>
	<style type="text/css">
		#app{
			color: white;
		}
		table,td {
			border: 0px solid black;
			border-collapse: collapse;
		}
		td div{
			/*width: 80px;*/
			height: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			padding: 0px;
		}
		button{
			border: 0px solid black;
			border-radius: 5px;
			color: black;
			background-color: #c0c0c0;
			width: 120px;
			height: 70px;
			font-size: 30px;
		}
		button:focus{
			outline: none;
		}
		button:hover{
			background-color: #ecf0f1;
		}
		input{
			width: 95%;
			height: 70px;
			border: 0px;
			/*padding: 0px;*/
			border-radius: 5px;
			font-size: 30px;
			padding-left: 5px;
			color: white;
		}
		#show:focus{
			outline: none;
		}
		.img{
			background-repeat: no-repeat;
			background-size: cover;
			width: 120px;
			height: 120px;
		}
		.img-throw{
			background-image: url('./img/throw.png');
			opacity: 0;
		}
		.img-green{
			background-image: url('./img/green.png');
		}
		.img-blue{
			background-image: url('./img/blue.png');
		}
		.img-orange{
			background-image: url('./img/orange.png');
		}
		.img-brown{
			background-image: url('./img/brown.png');
		}
		.img-wrong{
			background-image: url('./img/wrong.png');
		}
		.show{
			opacity: 1;
		}
		#result{
			/*border: 1px solid white;*/
		}
		#result td{
			width: 150px;
		}
	</style>
</head>
<body style="background-image: url(background5.jpg);background-repeat: no-repeat;background-size: cover;">
	<div id="app" style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
		<h3>垃圾分类问答</h3>
		<div style="margin-top: 50px;background-color: rgba(255,255,255,0.3);">
			<table>
				<tr>
					<td colspan="4">
						<div>
							<input style="background-color: #bdc3c7;color: black;font-size: 15px;" type="text" readonly="true" value="1.可回收垃圾;2.有害垃圾;3,厨余垃圾;4.其它垃圾">
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="4">
						<div>
							<input style="background-color: #bdc3c7;" type="text" name="" readonly="true" placeholder="点击开始按钮选择题目" :value="item">
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<div><button @click="start">开始</button></div>
					</td>
					<td colspan="2">
						<div><button @click="end">停止</button></div>
					</td>
				</tr>
				<tr >
					<td>
						<!-- 这里两个class必须分开写,vue格式下大括号内用','分隔,而不是';',因为{}代表的是对象' -->
						<!--注意这里的分层:最外层是[],包裹是是对象,如果是对应的类变量,直接写变量名即可,否则用{包裹}-->
						<div class="img" :class="[{show:show1},showImg1]"></div>
					</td>
					<td>
						<div class="img" :class="[{show:show2},showImg2]"></div>
					</td>
					<td>
						<div class="img" :class="[{show:show3},showImg3]"></div>
					</td>
					<td>
						<div class="img" :class="[{show:show4},showImg4]"></div>
					</td>
				</tr>
				<tr >
					<td>
						<div id="kitchenRubish" @mouseover="show" @mouseout="hidden" @click="showResult" class="img" style="background-image: url('./img/kitchenRubish.png');"></div>
					</td>
					<td>
						<div id="recycleRubish" @mouseover="show" @mouseout="hidden" @click="showResult" class="img" style="background-image: url('./img/recycleRubish.png');"></div>
					</td>
					<td>
						<div id="otherRubish" @mouseover="show" @mouseout="hidden" @click="showResult" class="img" style="background-image: url('./img/otherRubish.png');"></div>
					</td>
					<td>
						<div id="unrecycleRubish" @mouseover="show" @mouseout="hidden" @click="showResult" class="img" style="background-image: url('./img/unrecycleRubish.png');"></div>
					</td>
				</tr>
				<tr >
					<td>
						<div>厨余垃圾</div>
					</td>
					<td>
						<div>循环垃圾</div>
					</td>
					<td>
						<div>其他垃圾</div>
					</td>
					<td>
						<div>有害垃圾</div>
					</td>
				</tr>
			</table>
		</div>
		<div>
			<div style="display: flex;align-items: center;">
				<h3>历史记录</h3>
				<div>
					&nbsp;正确率:{{rightRate}}
				</div>
			</div>
			<table id="result" style="background-color: rgba(255,255,255,0.3);">
				<tr>
					<td>编号</td>
					<td>垃圾名称</td>
					<td>垃圾类别</td>
					<td>选择结果</td>
					<td></td>
				</tr>
				<!--index是自带的参数id,使用时用()包裹-->
				<tr v-for="(record,index) in records">
					<td>{{index}}</td>
					<td>{{record.garbageName}}</td>
					<td>{{record.garbageType}}</td>
					<td>{{record.choiceResult}}</td>
					<td>{{record.result}}</td>
				</tr>
			</table>
		</div>
	</div>
	<script type="text/javascript">

		var app = new Vue({
			el: '#app',
			data(){
				return {
					rabish:"",
					item:"",  //第一个输入框显示的内容
					answer:"",
					garbageId:"",
					clock:"",
					state:0,  //状态标志位:0/1/2/3,未选择题目/在选择题目/未选择结果/已选择结果
					choice: 0,
					showImg1: "img-throw",
					showImg2: "img-throw",
					showImg3: "img-throw",
					showImg4: "img-throw",
					records: [], //记录,info:id garbageId() chiceResult
					count: 0,
					ragitCount: 0
				}
			},
			computed:{
				show1:function(){
					return this.$data.choice==1?true:false;
				},
				show2:function(){
					return this.$data.choice==2?true:false;
				},
				show3:function(){
					return this.$data.choice==3?true:false;
				},
				show4:function(){
					return this.$data.choice==4?true:false;
				},
				rightRate:function(){
					let data = this.$data;
					if(data.count==0){
						return "0%";
					}
					let rate = data.rightCount/data.count*100;
					let str = new String(rate);
					return str.substring(0,str.indexOf(".")+2+1) + "%";
				}
			},
			methods:{
				reset:function(){
					let data = this.$data;
					data.item = "";
					data.answer = "";
					data.garbageId = "";
					data.state = 0;
					data.choice = 0;
					data.showImg1 = "img-throw";
					data.showImg2 = "img-throw";
					data.showImg3 = "img-throw";
					data.showImg4 = "img-throw";
					if(data.clock != null){
						window.clearInterval(data.clock);
					}
				},
				start:function(){
					let data = this.$data;
					let rabish = data.rabish;
					this.reset();
					if(data.state != 1){
						alert("点击'停止'选择题目");
						data.clock = setInterval(function(){
							//获得1-60内的随机整数
							data.garbageId = Math.ceil(Math.random()*60)+1;
							data.item = rabish[data.garbageId].garbageName + "[" + rabish[data.garbageId].garbageFlag + "]";
						},100);
						data.state = 1;
					}else{
						alert("请勿重复点击'开始按钮'")
					}
				},
				end:function(){
					let data = this.$data;
					if(data.state = 1){
						window.clearInterval(data.clock);
						data.answer = "显示答案";
						data.state = 2;
					}
					alert("请选择对应的垃圾选项");
				},
				showAnswer:function(){
					let data = this.$data;
					let rabish = data.rabish;
					data.answer = rabish[data.garbageId].garbageType + "[" + rabish[data.garbageId].garbageInfo + "]"
				},
				show:function(event){
					let data = this.$data;
					let id = event.target.id;
					let ans;
					if(data.state == 2){
						switch(id){
							case "kitchenRubish":ans = 1;break;
							case "recycleRubish":ans = 2;break;
							case "otherRubish":ans = 3;break;
							case "unrecycleRubish":ans = 4;break;
						}
						data.choice = ans;
					}
				},
				hidden:function(){
					let data = this.$data;
					if(data.state == 2){
						this.$data.choice = 0;
					}
				},
				changeToRight:function(choice){
					let data = this.$data;
					switch(choice){
						case 1:data.showImg1 = "img-green";break;
						case 2:data.showImg2 = "img-blue";break;
						case 3:data.showImg3 = "img-orange";break;
						case 4:data.showImg4 = "img-brown";break;
					}
				},
				changeToWrong:function(choice){
					let data = this.$data;
					switch(choice){
						case 1:data.showImg1 = "img-wrong";break;
						case 2:data.showImg2 = "img-wrong";break;
						case 3:data.showImg3 = "img-wrong";break;
						case 4:data.showImg4 = "img-wrong";break;
					}
				},
				showResult:function(){
					let data = this.$data;
					if(data.state == 2){
						let garbageId = data.garbageId;
						let type;
						let rabish = data.rabish;
						let choice = data.choice;
						let resultObject = new Object();  //new一个对象
						switch(rabish[garbageId].garbageType){
							case "厨余垃圾":type = 1;break;
							case "可回收垃圾":type = 2;break;
							case "其它垃圾":type = 3;break;
							case "有害垃圾":type = 4;break;
						}
						data.count++;
						if(choice == type){
							alert("回答正确!");
							data.rightCount += 1;
							this.changeToRight(type);
							resultObject.result = "正确";
						}else{
							alert("sad~,错误了!");
							console.log("choice:" + choice + " type:" + type)
							this.changeToRight(type);
							this.changeToWrong(choice);
							resultObject.result = "错误";
						}
						localStorage.setItem("count",data.count);
						localStorage.setItem("rightCount",data.rightCount);
						//需要加入localStorage的数据
						resultObject.garbageName = rabish[garbageId].garbageName;
						resultObject.garbageType = rabish[garbageId].garbageType;
						switch(choice){
							case 1:resultObject.choiceResult = "厨余垃圾";break;
							case 2:resultObject.choiceResult = "可回收垃圾";break;
							case 3:resultObject.choiceResult = "其它垃圾";break;
							case 4:resultObject.choiceResult = "有害垃圾";break;
						}
						let records = data.records;
						if(records == null){
							records = [];
						}
						records.push(resultObject);
						data.records = records;
						localStorage.setItem("records",JSON.stringify(records));  //注意,存入localStorage之前要转成json格式
						choice = 0;
						data.state = 3;
					}
				}
			},
			created:function(){
				let data = this.$data;
				var rabish = [{"garbageId": 1, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "报纸", "garbageType": "可回收垃圾"},{"garbageId": 2, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "传单", "garbageType": "可回收垃圾"},{"garbageId": 3, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "杂志", "garbageType": "可回收垃圾"},{"garbageId": 4, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "旧书", "garbageType": "可回收垃圾"},{"garbageId": 5, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "纸板箱", "garbageType": "可回收垃圾"},{"garbageId": 6, "garbageFlag": "纸类", "garbageInfo": "再生利用", "garbageName": "未受污染的纸制品", "garbageType": "可回收垃圾"},{"garbageId": 7, "garbageFlag": "金属", "garbageInfo": "再生利用", "garbageName": "铁制品", "garbageType": "可回收垃圾"},{"garbageId": 8, "garbageFlag": "金属", "garbageInfo": "再生利用", "garbageName": "铜制品", "garbageType": "可回收垃圾"},{"garbageId": 9, "garbageFlag": "金属", "garbageInfo": "再生利用", "garbageName": "铝制品", "garbageType": "可回收垃圾"},{"garbageId": 10, "garbageFlag": "玻璃", "garbageInfo": "再生利用", "garbageName": "玻璃瓶罐", "garbageType": "可回收垃圾"},{"garbageId": 11, "garbageFlag": "玻璃", "garbageInfo": "再生利用", "garbageName": "平板玻璃", "garbageType": "可回收垃圾"},{"garbageId": 12, "garbageFlag": "玻璃", "garbageInfo": "再生利用", "garbageName": "其他玻璃制品", "garbageType": "可回收垃圾"},{"garbageId": 13, "garbageFlag": "除塑料袋外的塑料制品", "garbageInfo": "再生利用", "garbageName": "泡沫塑料", "garbageType": "可回收垃圾"},{"garbageId": 14, "garbageFlag": "除塑料袋外的塑料制品", "garbageInfo": "再生利用", "garbageName": "塑料瓶", "garbageType": "可回收垃圾"},{"garbageId": 15, "garbageFlag": "除塑料袋外的塑料制品", "garbageInfo": "再生利用", "garbageName": "硬塑料", "garbageType": "可回收垃圾"},{"garbageId": 16, "garbageFlag": "橡胶及橡胶制品", "garbageInfo": "再生利用", "garbageName": "橡胶及橡胶制品", "garbageType": "可回收垃圾"},{"garbageId": 17, "garbageFlag": "利乐包装", "garbageInfo": "再生利用", "garbageName": "牛奶盒", "garbageType": "可回收垃圾"},{"garbageId": 18, "garbageFlag": "饮料瓶", "garbageInfo": "再生利用", "garbageName": "可乐罐", "garbageType": "可回收垃圾"},{"garbageId": 19, "garbageFlag": "饮料瓶", "garbageInfo": "再生利用", "garbageName": "塑料饮料瓶", "garbageType": "可回收垃圾"},{"garbageId": 20, "garbageFlag": "饮料瓶", "garbageInfo": "再生利用", "garbageName": "啤酒瓶", "garbageType": "可回收垃圾"},{"garbageId": 21, "garbageFlag": "电池", "garbageInfo": "安全填埋、焚烧", "garbageName": "蓄电池", "garbageType": "有害垃圾"},{"garbageId": 22, "garbageFlag": "电池", "garbageInfo": "安全填埋、焚烧", "garbageName": "钮扣电池", "garbageType": "有害垃圾"},{"garbageId": 23, "garbageFlag": "废旧电子产品", "garbageInfo": "安全填埋、焚烧", "garbageName": "废旧电子产品", "garbageType": "有害垃圾"},{"garbageId": 24, "garbageFlag": "废旧灯管灯泡", "garbageInfo": "安全填埋、焚烧", "garbageName": "废旧灯管灯泡", "garbageType": "有害垃圾"},{"garbageId": 25, "garbageFlag": "过期药品", "garbageInfo": "安全填埋、焚烧", "garbageName": "过期药品", "garbageType": "有害垃圾"},{"garbageId": 26, "garbageFlag": "过期日用化妆品", "garbageInfo": "安全填埋、焚烧", "garbageName": "过期日用化妆品", "garbageType": "有害垃圾"},{"garbageId": 27, "garbageFlag": "染发剂", "garbageInfo": "安全填埋、焚烧", "garbageName": "染发剂", "garbageType": "有害垃圾"},{"garbageId": 28, "garbageFlag": "杀虫剂容器", "garbageInfo": "安全填埋、焚烧", "garbageName": "杀虫剂容器", "garbageType": "有害垃圾"},{"garbageId": 29, "garbageFlag": "除草剂容器", "garbageInfo": "安全填埋、焚烧", "garbageName": "除草剂容器", "garbageType": "有害垃圾"},{"garbageId": 30, "garbageFlag": "废弃水银温度计", "garbageInfo": "安全填埋、焚烧", "garbageName": "废弃水银温度计", "garbageType": "有害垃圾"},{"garbageId": 31, "garbageFlag": "废油漆桶", "garbageInfo": "安全填埋、焚烧", "garbageName": "废油漆桶", "garbageType": "有害垃圾"},{"garbageId": 32, "garbageFlag": "废打印机墨盒", "garbageInfo": "安全填埋、焚烧", "garbageName": "废打印机墨盒", "garbageType": "有害垃圾"},{"garbageId": 33, "garbageFlag": "硒鼓", "garbageInfo": "安全填埋、焚烧", "garbageName": "硒鼓", "garbageType": "有害垃圾"},{"garbageId": 34, "garbageFlag": "食物残余", "garbageInfo": "堆肥、制作饲料", "garbageName": "剩菜剩饭", "garbageType": "厨余垃圾"},{"garbageId": 35, "garbageFlag": "食物残余", "garbageInfo": "堆肥、制作饲料", "garbageName": "西餐糕点", "garbageType": "厨余垃圾"},{"garbageId": 36, "garbageFlag": "菜梗菜叶", "garbageInfo": "堆肥、制作饲料", "garbageName": "菜梗菜叶", "garbageType": "厨余垃圾"},{"garbageId": 37, "garbageFlag": "动物骨骼内脏", "garbageInfo": "堆肥、制作饲料", "garbageName": "动物骨骼内脏", "garbageType": "厨余垃圾"},{"garbageId": 38, "garbageFlag": "茶叶渣", "garbageInfo": "堆肥、制作饲料", "garbageName": "茶叶渣", "garbageType": "厨余垃圾"},{"garbageId": 39, "garbageFlag": "水果残余", "garbageInfo": "堆肥、制作饲料", "garbageName": "水果残余", "garbageType": "厨余垃圾"},{"garbageId": 40, "garbageFlag": "果壳瓜皮", "garbageInfo": "堆肥、制作饲料", "garbageName": "果壳瓜皮", "garbageType": "厨余垃圾"},{"garbageId": 41, "garbageFlag": "盆景等植物", "garbageInfo": "堆肥、制作饲料", "garbageName": "残枝落叶", "garbageType": "厨余垃圾"},{"garbageId": 42, "garbageFlag": "废弃食用油", "garbageInfo": "堆肥、制作饲料", "garbageName": "废弃食用油", "garbageType": "厨余垃圾"},{"garbageId": 43, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "纸杯", "garbageType": "其它垃圾"},{"garbageId": 44, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "照片", "garbageType": "其它垃圾"},{"garbageId": 45, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "复写纸", "garbageType": "其它垃圾"},{"garbageId": 46, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "压敏纸", "garbageType": "其它垃圾"},{"garbageId": 47, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "收据用纸", "garbageType": "其它垃圾"},{"garbageId": 48, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "明星片", "garbageType": "其它垃圾"},{"garbageId": 49, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "相册", "garbageType": "其它垃圾"},{"garbageId": 50, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "卫生纸", "garbageType": "其它垃圾"},{"garbageId": 51, "garbageFlag": "受污染与无法再生的纸张", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "尿片", "garbageType": "其它垃圾"},{"garbageId": 52, "garbageFlag": "受污染或其他不可回收的玻璃", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "受污染或其他不可回收的玻璃", "garbageType": "其它垃圾"},{"garbageId": 53, "garbageFlag": "塑料袋与其他受污染的塑料制品", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "塑料袋与其他受污染的塑料制品", "garbageType": "其它垃圾"},{"garbageId": 54, "garbageFlag": "废旧衣物与其他纺织品", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "废旧衣物与其他纺织品", "garbageType": "其它垃圾"},{"garbageId": 55, "garbageFlag": "破旧陶瓷品", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "破旧陶瓷品", "garbageType": "其它垃圾"},{"garbageId": 56, "garbageFlag": "妇女卫生用品", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "妇女卫生用品", "garbageType": "其它垃圾"},{"garbageId": 57, "garbageFlag": "一次性餐具", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "一次性餐具", "garbageType": "其它垃圾"},{"garbageId": 58, "garbageFlag": "贝壳", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "贝壳", "garbageType": "其它垃圾"},{"garbageId": 59, "garbageFlag": "烟头", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "烟头", "garbageType": "其它垃圾"},{"garbageId": 60, "garbageFlag": "灰土", "garbageInfo": "可燃部分焚烧发电，不可燃部分卫生填埋", "garbageName": "灰土", "garbageType": "其它垃圾"}];
					data.rabish = eval(rabish);
					records = localStorage.getItem("records");
					data.records = JSON.parse(records);
					data.count = localStorage.getItem("count");
					data.count = data.count==null?0:data.count;
					data.rightCount = parseInt(localStorage.getItem("rightCount"));
					data.rightCount = data.rightCount==null?0:data.rightCount;
			}
		})
	</script>
</body>
</html>